import React from 'react';
import { Layout, Button, Space, Dropdown } from 'antd';
import type { MenuProps } from 'antd';
import {
  BellOutlined,
  UserOutlined,
  SettingOutlined,
  LogoutOutlined,
  HomeOutlined
} from '@ant-design/icons';
import { useUserStore } from '@/store';
// 导入语言切换器组件 - 允许用户切换应用的语言
import LanguageSwitcher from '@/components/LanguageSwitcher';
// 导入主题切换器组件 - 允许用户切换应用的主题（亮色、暗色或自动）
import ThemeSwitcher from '@/components/ThemeSwitcher';

const { Header } = Layout;

const Topbar: React.FC = () => {
  const { account, logout } = useUserStore();

  const userMenuItems: MenuProps['items'] = [
    {
      key: 'profile',
      icon: <UserOutlined />,
      label: '个人设置',
    },
    {
      key: 'preferences',
      icon: <SettingOutlined />,
      label: '偏好设置',
    },
    {
      type: 'divider',
    },
    {
      key: 'logout',
      icon: <LogoutOutlined />,
      label: '退出登录',
      onClick: () => {
        logout();
        window.location.href = '/login';
      },
    },
  ];

  return (
    <Header
      style={{
        padding: '0 24px',
        boxShadow: '0 1px 4px rgba(0,21,41,.08)',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'space-between',
        position: 'sticky',
        top: 0,
        zIndex: 99,
        height: 64,
      }}
      className="topbar-header" // 使用CSS类来应用主题样式
    >
      {/* Left side - Navigation and breadcrumb */}
      <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
        <Button 
          type="text" 
          icon={<HomeOutlined />}
          style={{ display: 'flex', alignItems: 'center' }}
        >
          首页
        </Button>
        
        <div style={{ 
          height: 20, 
          width: 1, 
          backgroundColor: '#f0f0f0',
          margin: '0 8px'
        }} />
        
        <span style={{ color: '#999', fontSize: 14 }}>
          当前位置: 首页
        </span>
      </div>

      {/* Right side - User actions and tools */}
      <Space size="middle">
        {/* 语言切换器 - 允许用户在中文和英文之间切换 */}
        <LanguageSwitcher />
        
        {/* 主题切换器 - 允许用户在亮色、暗色和自动主题之间切换 */}
        <ThemeSwitcher />
        
        <Button
          type="text"
          icon={<BellOutlined />}
          style={{ display: 'flex', alignItems: 'center' }}
        >
          通知
        </Button>
        
        <Dropdown
          menu={{ items: userMenuItems }}
          placement="bottomRight"
          trigger={['click']}
        >
          <Button
            type="text"
            icon={<UserOutlined />}
            style={{ display: 'flex', alignItems: 'center', gap: 8 }}
          >
            {account || '用户'}
          </Button>
        </Dropdown>
      </Space>
    </Header>
  );
};

export default Topbar;